<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .layui-disabled, .layui-disabled:hover{
            color: #141313!important;
        }
    </style>
</head>
<body class="childrenBody">
<form class="layui-form layui-row" action="" style="padding: 20px 20px 10px 20px;background-color: #fff;">
    <input type="text" name="userId" value="" th:value="${userId}" hidden>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" value="" th:value="${userName}" disabled class="layui-input layui-disabled" style="background-color: #c0c0c057;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-block">
                <input type="password" value="" placeholder="请输入旧密码" lay-verify="required" class="layui-input pwd"
                       name="usedPwd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" value="" placeholder="请输入新密码" lay-verify="required|Pwd" id="oldPwd"
                       class="layui-input pwd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" value="" placeholder="请确认密码" lay-verify="required|confirmPwd"
                       class="layui-input pwd" name="newPwd">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block" style="margin-left: 0px;margin-top: 20px">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1"
                >立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        let $ = layui.jquery;
        let form = layui.form;
        let layer = layui.layer;

        //添加验证规则
        form.verify({
            Pwd: function (value, item) {
                if (value.length < 6) {
                    return "密码长度不能小于6位";
                }
            },
            confirmPwd: function (value, item) {
                if (!new RegExp($("#oldPwd").val()).test(value)) {
                    return "两次输入密码不一致，请重新输入！";
                }
            }
        })
        //监听提交
        form.on('submit(demo1)', function (data) {
            let form_data = data.field;
            let loading = layer.load();
            //发异步
            $.ajax({
                type: "POST",
                url: "/api/user/change",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(form_data),
                dataType: "json",
                success: function (data) {
                    layer.close(loading);
                    if (data.code === 200) {
                        //发异步，把数据提交给
                        layer.msg(data.message, {icon: 1, time: 3000}, function () {
                            parent.location.href = "/logout";
                        });
                    } else {
                        layer.msg(data.message, {icon: 2, time: 3000});
                    }
                },
                error: function (data) {
                }
            });
            return false;
        });
    })
</script>
</body>
</html>